<template>
  <view class="main">
    <NavBar title="盘店拍照"></NavBar>
    <div class="title plr15">1.类型</div>
    <div class="content bgb">
      <radio-group class="ub plr15" style="flex-wrap:wrap;" @change="radioChange">
        <div class="cell ub ub-ac" v-for="(item, index) in datalist" :key="index">
          <radio :value="item" color="#3387FF" :checked="item == current" />
          {{ item }}
        </div>
      </radio-group>
    </div>
    <div class="title plr15">2.现场照片</div>
    <div class="content">
      <div class="uploadImgDiv ub ub-pj1">
        <div class="uploadImg ub-ver ub ub-ac ub-pc" @click="chooseImage">
          <image v-if="apply_img" class="uImg" mode="asceptFit" :src="apply_img"></image>
          <image v-if="apply_img" class="del_icon" src="../../static/assets/expire.png" @click.stop="delImg"></image>
          <image v-else class="plus" mode="asceptFill" src="../../static/assets/upload.png"></image>
        </div>
      </div>
    </div>
    <div class="btn-area">
      <button type="primary" class="saveBtn" :disabled="current==-1" @click="submit">提交</button>
    </div>
  </view>
</template>
<script>
import service from '@/utils/http'
import constant from '@/utils/constant'
import { errDialog, loading } from '@/utils/util'
import COS from 'cos-js-sdk-v5'
export default {
  data() {
    return {
      currentStatus: 1,
      current: 0,
      datalist: ['店面', '盘点', '竞品', '陈列', '其它'],
      reasonCode: '',
      point: '',
      apply_img: '',
      tcode: '',
      cos: null,
      credentials: null,
      bucketInfo: null
    }
  },
  onLoad() {
    service.get('/app/crmFileInfo/getCOSBucketInfo').then(res => {
      console.log(res);
      this.bucketInfo = res
    })
  },
  methods: {
    chooseImage() {
      service.get('/app/crmFileInfo/getCOSTempKey').then((res) => {
        var obj = res
        console.log(obj);
        var cos = new COS({
          getAuthorization: function(options, callback) {
            callback({
              TmpSecretId: obj.credentials.tmpSecretId,
              TmpSecretKey: obj.credentials.tmpSecretKey,
              XCosSecurityToken: obj.credentials.sessionToken,
              ExpiredTime: obj.expiredTime
            })
          },
          FileParallelLimit: 3, // 控制文件上传并发数
          ChunkParallelLimit: 3, // 控制单个文件下分片上传并发数
          ProgressInterval: 1000 // 控制上传的 onProgress 回调的间隔
        })
        uni.chooseImage({
            count: 1, // 默认9
            sizeType: ['original'], // 可以指定是原图还是压缩图，默认用原图
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: (res) => {
              var filePath = res.tempFilePaths[0];
              var Key = filePath.substr(filePath.lastIndexOf("/") + 1)
              console.log(cos);
              cos.postObject({
                  Bucket: this.bucketInfo.bucket,
                  Region: this.bucketInfo.region,
                  Key,
                  FilePath: filePath,
                  onProgress: function (info) {
                      console.log(JSON.stringify(info));
                  }
              }, function (err, resp) {
                  console.log(err)
                  console.log(resp)
              })
            }
        })
      })
    },
    delImg(e) {
      this.apply_img = ''
    },
    radioChange(e) {
      this.current = e.target.value
    },
    submit() {
      if (this.apply_code === -1) {
        errDialog('请选择无法靠近采样点的原因！')
        return
      }
      if (this.apply_img === '') {
        errDialog('请上传现场图片！')
        return
      }
      const obj = {
        apply_code: this.current,
        apply_img: this.apply_img,
        task_code: this.tcode,
      }
      service.put('collect/task/apply', obj).then((res) => {
          uni.showToast({
            title: '提交成功',
            icon: 'none',
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        })
    },
  },
}
</script>
<style scoped>
.cell {
  width: 230rpx;
  height: 90rpx;
  font-size: 28rpx
}
.title {
  font-size: 24rpx;
  line-height: 72rpx;
}
.content .cell:last-child {
  border-bottom: none;
}
.saveBtn {
  width: 690rpx;
  height: 80rpx;
  border-radius: 10rpx;
  line-height: 80rpx;
  font-size: 28rpx;
}
.saveBtn[disabled] {
  background-color: #f1f1f1;
  color: #999999;
}
.tit {
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
}
.uploadImgDiv {
  padding: 30rpx;
  background-color: #fff;
}
.uploadImg {
  width: 500rpx;
  height: 360rpx;
  position: relative;
}
.uploadImg .plus {
  width: 450rpx;
  height: 360rpx;
  display: block;
}
.uploadImg .uImg {
  width: 450rpx;
  height: 360rpx;
  display: block;
  border-radius: 6rpx;
}
.uploadImg .del_icon {
  position: absolute;
  display: block;
  width: 40rpx;
  height: 40rpx;
  top: 0rpx;
  right: 0rpx;
  z-index: 99;
}
</style>
